<template>
  <div>
    <div class="main" ref="main">
        <div class="list" v-for="item, index in noticeList" :key="index" @click="toNotice(item)">
            <img :src="item.txjt == null ? (item.wyjt == null ? item.szmtjt : item.wyjt) : item.txjt"/>
            <div class="content">
                <div class="title">{{ item.pmggmc }}</div>
                <!-- <div class="desc" ref="desc" >{{ item.ggnr }}</div> -->
                <div class="footer">
                    <div class="company">公司名</div>
                    <!-- <div style="flex: 1;"></div> -->
                    <div class="time">{{ item.creates }}</div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import {getAll} from '@/api/noticeList/noticeList';
export default {
    data(){
        return{
            noticeList:[],
        }
    },
    methods: {
        getList(){
            let data = 'pmggmc=&pageno=1&countonepage=10';
            getAll(data).then((res) => {
                if(res){
                    console.log(res.data);
                    this.noticeList = res.data.list;
                    for(let item of this.noticeList){
                        item.creates = item.creates.substr(0,11);
                    }
                }
            })
        },
        toNotice(item){
            this.$router.push({
                path: '/notice',
                query: {
                    pmggbh: item.pmggbh,
                }
            });
        }
    },
    mounted(){
        this.getList();
    }
}
</script>

<style lang="less" scoped>
.main{
    margin: 10px 100px;
    display: flex;
    flex-wrap: wrap;
}
.main .list{
    // padding: 0 100px;
    display: flex;
    
    background-color: #fff;
    width: 46%;
    margin: 1%;
    cursor: pointer;
}
.main .list img{
    width: 150px;
    height: 150px;
}
.main .list .content{
    margin-left: 20px;
    padding: 10px;
    position: relative;
    width: 100%;
}
.main .list .content .title{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.main .list .content .desc{
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 40px;
}

.main .list .content .footer{
    position: absolute;
    display: flex;
    font-size: 12px;
    color: #999;
    bottom: 10px;
    width: inherit;
}
.main .list .content .footer .company{
    width: 70%;
}
.main .list .content .footer .time{
    width: 20%;
    text-align: right;
}
</style>